<%@ page import="java.sql.*"%>
<%@ page import="javax.sql.DataSource"%>
<%@ page import="javax.naming.InitialContext"%>
<%@ page import="java.io.*"%>
<%@ page import="javax.naming.Context"%>
<%@ page import="java.util.Date"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%@ include file="/include/jqueryinclude.jsp"%>
<link rel="stylesheet" href="../style/layout.css" type="text/css"/>
<link rel="stylesheet" href="../style/menu_style.css" type="text/css" />
<link rel="stylesheet" href="../style/jqueryUI/ui-lightness/jquery-ui-1.8.16.custom.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../style/styles.css" />
<link rel="stylesheet" type="text/css" href="../style/jquery.confirm/jquery.confirm.css" />
<script type="text/javascript" src="../scripts/jqueryUI.js"></script>
<script type="text/javascript" src="../scripts/clock.js"></script>
<title>${ eventObject.getEventName() }</title>
</head>
<body onload="updateClock(); setInterval('updateClock()',1000)">
	<%@ include file="../include/header.jsp" %>
	<% int eventId=Integer.parseInt(request.getParameter("id"));%>
	<span id="id" value="${eventObject.getId()}"></span>
	<span id="username" value="<%= request.getUserPrincipal().getName()%>"></span>
	<div id="mainContainer">
		<div id="mainContent">
			<div id="title">${ eventObject.getEventName() }</div>
			<b>Minimum capacity:</b> ${ eventObject.getMinCapacity() }<br/>
			<c:if test="${ eventObject.getMaxCapacity() > 0 }"><b>Maximum Capacity:</b> ${ eventObject.getMaxCapacity() }<br/></c:if>
			<b>Start time:</b> ${ eventObject.getStartTime() }<br/>
			<b>Deadline:</b> ${ eventObject.getDeadline() }<br/>
			<b>Description:</b> ${ eventObject.getDescription() }<br/>
			<b>Venue:</b> <a href="showVenue.do?id=${eventObject.getVenueId() }" id="venueLink">${ eventObject.getVenueName() }<div id="modalBox" title="${ eventObject.getVenueName() }"></div></a><br/>
			<br/>
			<b>Number of participants: ${eventObject.getNumberOfSignedUpUsers() }</b><br/>
			
			<ul>
				<c:forEach var="user" items="${eventObject.getSignedUpUsers()}">
					<li>
						<c:out value="${user.getUsername()}" />
						<c:if test="${ userRole.equals('moderator') }">
							<a href="https://localhost:8443/recgames/registered/banUser.do?id=${user.getId()}&eventId=<%=eventId%>">X</a>
						</c:if>
					</li>
				</c:forEach>
			</ul>
			<span id="error"><c:if test="${banYourSelf!=null}">LoL can't ban yourself stupid :S</c:if><br /></span>
			
			<c:choose>
				<c:when test="${ userRole.equals('moderator') }">
					<b>Banned users:</b>
					<ul>
					<c:if test="${ bannedUsers.size()==0 }">No banned users</c:if>
					<c:forEach var="user" items="${bannedUsers}">
						<li>
							<c:out value="${user.getUsername()}" />
							<a href="https://localhost:8443/recgames/registered/unbanUser.do?id=${user.getId()}&eventId=<%=eventId%>">Unban</a>
						</li>
					</c:forEach>
					</ul>
					<br/>
					<a href="editEvent.do?id=<%=eventId%>">Edit event</a>
				<div class="item" value="https://localhost:8443/recgames/registered/deleteEvent.do?id=<%=eventId%>" name="Event: ${event.getEventName()}">
					<div class="delete">
						<img src="https://localhost:8443/recgames/img/delete.jpg"/>
					</div>
				</div>
					
					<br/>
					<br/>
				</c:when>	
				<c:when test="${ userRole.equals('signedUp') }">
					<a id="signOffLink" href="#ajaxSignOff">Sign Off</a>
				</c:when>
				<c:when test="${userRole.equals('banned')}">
					<span id="error">You are banned from this event</span>
				</c:when>
				<c:otherwise>
					<span id="error">${ error }</span>
					<c:choose>
						<c:when test="${ eventObject.getStatus().equals('full') }">
							<span id="error">You can't sign up for this event. The event is full.</span>
						</c:when>
						<c:otherwise>
							<button id="signUpButton">Sign up for event!</button>
						</c:otherwise>
					</c:choose>
				</c:otherwise>
			</c:choose>
		</div>	
		<%@ include file="/include/menu.jsp" %>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function(){
			
			//Show venue(ajax) in modal box 
			$('#venueLink').click(function(event) {
					event.preventDefault();
					$('#modalBox').dialog({
						height: 150,
						modal: true
					});
					$.ajax({
	                    url: "showVenue.do?id=${eventObject.getVenueId()}",
	                    success: function(data){
	                        $('#modalBox').html(data);
	                    }
	            	});
			});
			
			//Sign up for event using ajax
			$('#signUpButton').click(function(){
				$.ajax({
					url: "eventSignUp.do?eventId="+$('#id').attr('value')+"&username="+$('#username').attr('value') ,
					success: function(data){
						window.location.href="https://localhost:8443/recgames/registered/showEvent.do?id="+$('#id').attr('value');
					}
				});
			});
			
			//Sign off event using ajax
			$('#signOffLink').click(function(){
				$.ajax({
					url: "eventSignOff.do?id="+$('#id').attr('value') ,
					success: function(data){
						window.location.href="https://localhost:8443/recgames/registered/showEvent.do?id="+$('#id').attr('value');
					}
				});
			});
		
		});
	</script>
	<script src="https://localhost:8443/recgames/scripts/jquery.confirm.js"></script>
	<script src="https://localhost:8443/recgames/scripts/script.js"></script>
</body>
</html>